<template>
  <view class="root">
    <scroll-view class="feedback-list" scroll-y="true" @scrolltolower="loadMoreData">
      <!-- 遍历并显示用户反馈 -->
      <view v-for="(item, index) in feedbackList" :key="index" class="feedback">
        <!-- 第一行 -->
        <view class="row">
          <p class="name">{{ item.userName || '加载中...' }}</p>
          <p class="time">{{ formatTime(item.reviewTime) }}</p>
          <view class="order-id">
            <p class="order-id" @click="goToFeedbackDetail(item.reviewId)">{{ item.orderNumber || '加载中...' }}</p>
          </view>
        </view>

        <!-- 第二行 -->
        <view class="row">
          <p class="score">综合评分: {{ item.rating || '加载中...' }}分</p>
          <view class="star">
            <view v-for="star in 5" :key="star" class="star" :class="{ filled: star <= (item.rating || 0) }">★</view>
          </view>
        </view>
      </view>

      <!-- 加载提示 -->
      <view class="load-more" v-if="loading">
        <text>加载中...</text>
      </view>
      <view class="no-more" v-if="!hasMore">
        <text>没有更多数据</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getToken } from '@/utils/auth'; // 获取 token 方法

const feedbackList = ref([]);  // 存储反馈数据
const loading = ref(false);  // 加载状态
const hasMore = ref(true); // 是否还有更多数据
const userMerchantId = 1; // 这里的 id 先写死为 1

// 格式化时间
const formatTime = (time) => {
  if (!time) return '未知时间';
  const date = new Date(time);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
};

// 获取用户反馈数据
const fetchFeedbackData = async () => {
  if (loading.value || !hasMore.value) return;
  loading.value = true;

  try {
    console.log('请求用户反馈数据');
    uni.request({
      url: `http://localhost:8866/sn/reviews/getReviews/${userMerchantId}`, // 确保 URL 正确
      method: 'GET',
      header: { Authorization: getToken() }, // 传入 token
      success: (res) => {
        console.log('完整响应数据：', res); // ✅ 打印完整响应，检查 `res.data` 结构

        if (res.statusCode !== 200) { 
          console.error('HTTP 错误码:', res.statusCode);
          return;
        }

        const responseData = res.data;
        if (!responseData || typeof responseData !== 'object') {
          console.error('响应数据格式错误:', responseData);
          return;
        }

        if (responseData.code !== 200) {
          console.error('数据请求失败:', responseData.msg || '未知错误');
          return;
        }

        // 解析数据
        const currentPageData = responseData.data?.records || [];
        feedbackList.value = [...feedbackList.value, ...currentPageData];

        // 判断是否还有下一页
        hasMore.value = responseData.data?.current < responseData.data?.pages;
      },
      fail: (error) => {
        console.error('请求失败:', error);
      },
      complete: () => {
        loading.value = false;
      }
    });
  } catch (error) {
    console.error('请求异常:', error);
    loading.value = false;
  }
};

// 上拉加载更多
const loadMoreData = () => {
  console.log('触发上拉加载');
  fetchFeedbackData();
};

// 跳转到反馈详情
const goToFeedbackDetail = (reviewId) => {
	console.log("传入的id为")
	console.log(reviewId)
  uni.navigateTo({
    url: `/pages/work/feedback_management/feedback_detail/feedback_detail?reviewId=${reviewId}`,
  });
};

// 组件挂载时加载数据
onMounted(() => {
  fetchFeedbackData();
});
</script>

<style>
.root {
  padding: 20px;
  background-color: #f9f9f9;
}

.feedback-list {
  height: 100vh;
  margin-top: 10px;
}

.feedback {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.name {
  font-weight: bold;
  font-size: 16px;
}

.time {
  font-size: 12px;
  color: #CCCCCC;
}

.order-id {
  font-size: 14px;
  color: #007BFF;
  text-decoration: underline;
  cursor: pointer;
}

.score {
  font-size: 14px;
  color: #333;
}

.star {
  display: flex;
  font-size: 20px;
  color: #ccc;
}

.star.filled {
  color: #FFD700;
}

.load-more {
  text-align: center;
  padding: 10px;
  background-color: #f0f0f0;
}

.no-more {
  text-align: center;
  padding: 10px;
  color: #888;
}
</style>
